<template>
  <a-table
    :scroll="scroll"
    :columns="columns"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    :row-key="(record, index) => index"
    :row-selection="rowSelection"
    :size="size"
    @change="handleTableChange"
  >
    <a-tooltip slot="id" slot-scope="text, record">
      <template slot="title">
        {{ record.status_show }}
      </template>

      <a-tag :color="record.status == 1 ? '#108ee9' : '#87d068'">
        <app-copy :value="record.id" />
      </a-tag>
    </a-tooltip>

    <template slot="type_name" slot-scope="text, record">
      {{ record.type_name }}
      <span v-if="record.type_abbreviation">
        [
        {{ record.type_abbreviation }}
        ]
      </span>
    </template>
    <template slot="action" slot-scope="text, record">
      <a @click="$emit('action', 'edit', record)">编辑</a>
      <a-divider type="vertical" />
      <a @click="$emit('action', 'child', record)">子集</a>
      <a-divider type="vertical" />
      <a-popconfirm
        title="是否删除该记录?"
        ok-text="确认"
        cancel-text="取消"
        @confirm="$emit('action', 'delete', record)"
      >
        <a href="#">删除</a>
      </a-popconfirm>
    </template>
  </a-table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => {
        return {}
      },
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    pagination: {
      type: [Object, Boolean],
      default: () => {
        return false
      },
    },
    rowSelection: {
      type: Object,
      default: () => {
        return undefined
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: undefined,
    },
    scroll: {
      type: Object,
      default: () => {
        // return { x: 1200 }
        return undefined
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.$emit("change", pagination, filters, sorter)
    },
  },
}
</script>

<style scoped>
.tooltipLink {
  color: #fff;
}
.tooltipLink:hover {
  color: #1890ff;
}
</style>
